Practical Approaches For Designing Accessible Websites by Magazine Smashing

Author:Magazine, Smashing
Language: eng
Format: epub
Tags: Smashing eBooks
Publisher: Smashing Magazine GmbH
Published: 2015-08-25T16:00:00+00:00

Making Modals More Usable And Accessible

Semantic markup goes a long way to building a fully usable and accessible modal window, but still more CSS and JavaScript can take the experience to the next level.

Including Focus States

Provide a focus state! This obviously isn’t exclusive to modal windows; many elements lack a proper focus state in some form or another beyond the browser’s basic default one (which may or may not have been cleared by your CSS reset). At the very least, pair the focus state with the hover state you’ve already designed:

.btn:hover, .btn:focus { background: #f00; }

However, because focusing and hovering are different types of interaction, giving the focus state its own style makes sense.

.btn:hover { background: #f00; } :focus { box-shadow: 0 0 3px rgba(0,0,0,.75); }

Really, any item that can be focused should have a focus state. Keep that in mind if you’re extending the browser’s default dotted outline.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.